<template>
	<view :class="[config.style]">
		<view class="custom-form" :style="{backgroundColor: params.data.background}">
			<view class="form-content">
				<view class="form-title">
					<h3>{{params.detail.title}}</h3>
				</view>
				<form @submit="formSubmit" @reset="formReset">
					<view class="form-group" v-for="(item,index) in formContent" :key="index">
						
						<view class="uni-form-item uni-column" v-if="item.type == 'text'">
							<view class="title">{{item.title}}</view>
							<view class="el textarea-sec">
								<input class="uni-input input" :name="item.title" placeholder-style="color:#999999;font-size:28rpx;" :placeholder="item.placeholder" />
							</view>
						</view>
						
						<view class="uni-form-item uni-column" v-if="item.type == 'textarea'">
							<view class="title">{{item.title}}</view>
							<view class="el textarea-sec">
								<textarea class="textarea" :name="item.title" placeholder-style="color:#999999;font-size:28rpx;" :placeholder="item.placeholder"/>
							</view>
						</view>
						
						<view class="uni-form-item uni-column" v-if="item.type == 'radio'">
							<view class="title">{{item.title}}</view>
							<view class="el">
								<radio-group class="radio-sec" :name="item.title" @change="radioChange">
									<label class="radio" v-for="(c,i) in item.options" :key="i" >
										<radio :value="c" :checked="i==0?true:false" :color="util.setStyleColor(config.style)" /> {{c}}
									</label>
								</radio-group>
							</view>
						</view>
						
						<view class="uni-form-item uni-column" v-if="item.type == 'checkbox'">
							<view class="title">{{item.title}}</view>
							<view class="el">
								<checkbox-group class="checkbox-sec" :name="item.title" @change="checkboxChange">
									<label class="checkbox" v-for="(c,i) in item.options" :key="i" >
										<checkbox :value="c" :checked="i==0?true:false" :color="util.setStyleColor(config.style)" /> {{c}}
									</label>
								</checkbox-group>
							</view>
						</view>
						
						<view class="uni-form-item uni-column" v-if="item.type == 'datetime'">
							<view class="title">{{item.title}}</view>
							<view class="el datetime-sec">
								<input class="uni-input datetime-input" :name="item.title"  v-model="datetime" />
								<uni-datetime-picker
									type="datetime"
									:value="datetime"
									:name="item.title"
									@change="changeDatetime"
								/>
							</view>
						</view>
					</view>
					<view class="form-submit">
						<button type="default" form-type="submit" class="btn-submit" :style="{backgroundColor: params.data.submit_color}">{{params.data.submit_text}}</button>
					</view>
				</form>
			</view>
		</view>
		<!--登录框-->
		<Login ref="login" :config="config" @getUserInfo="getUserInfo" @getData="getData"/>
	</view>
</template>

<script>
	export default {
		name: 'CustomForm',
		props: {
			title: {
				type: String,
				default: '自定义表单'
			},
			type: {
				type: String,
				default: 'custom_form',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: {},
			}
		},
		created() {
			this.formContent = this.params.detail.content
		},
		data() {
			return {
				formContent: [], // 表单数据
				datetime: '', // 日期时间
			}
		},
		methods: {
			
			formSubmit(e) {
				let that = this
				//console.log('form_id', that.params.data.id)
				// 表单提交
				let formData = e.detail.value
					formData = JSON.stringify(formData)
			
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/form'
					//#endif
					//#ifdef H5
					url = 'entry/site/form'
					//#endif
				// 提交至服务端
				this.util.request({
				    url: url,
					method: 'post',
					data: {
						action: 'add',
						form_id: that.params.data.id,
						form_data: formData
					},
					success: function(res){
						if (res.data.code == 200) {
							uni.showModal({
								title: '提示',
								content: '提交成功！',
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
									}
								}
							});
						}else if(res.data.code == 0 && res.data.data == 'login') {
							//触发登录框
							that.$refs.login.loginDialog()
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'none'
							});
						}
					}
				})
			},
			
			formReset() {
				
			},
			// 单选选中
			radioChange(e) {
				console.log(e)
			},
			checkboxChange(e) {
				console.log(e)
			},
			changeDatetime(e) {
				this.datetime = e;
				console.log("-change事件:", e);
			},
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo') || {}
				if(Object.keys(userInfo).length > 0){
					this.userInfo = userInfo
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.custom-form {
		padding: 20rpx;
		margin: 0;
		.form-content {
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.form-title {
				text-align: center;
				margin-bottom: 20rpx;
			}
			.form-group {
				margin: 20rpx auto;
				.uni-form-item {
					display: flex;
					.title {
						width: 120rpx;
						text-align: center;
						line-height: 64rpx;
						font-size: 29rpx;
					}
					.el {
						flex: 1;
						padding-left: 10rpx;
						.input {
							border: 1px solid #ddd;
							padding: 10rpx;
							border-radius: 10rpx;
						}
						.textarea {
							border: 1px solid #ddd;
							padding: 10rpx;
							border-radius: 10rpx;
							height: 160rpx;
							width: auto;
						}
						.datetime-input {
							display: none;
						}
					}
					.radio-sec {
						display: flex;
						.radio {
							width: 50%;
							padding: 10rpx 0;
						}
					}
					.checkbox-sec {
						display: flex;
						.checkbox {
							padding: 10rpx 0;
							width: 50%;
						}
					}
				}
			}
			
			.form-submit {
				margin-top: 20rpx;
				.btn-submit{
					color: #fff;
					border-radius: 20rpx;
					&::after {
						border: 0;
					}
				}
			}
		}
	}
</style>
